<template>
    <div class="detailpurchase">
        <Head msg="采购订单详情"></Head>
        <div class="order-list">
            <div class="order-head">
                <div>编号：{{info.order}}</div>
                <div :class="order-status">{{info.finish==1?'已完成':'进行中'}}</div>
            </div>

            <div class="order-content">
                <img class="order-goods-img" :src="info.goods_list.img">
                <div class="order-right">
                    <div class="goods-name">{{info.goods_list.chinese_name}}</div>
                    <div class="english-title">{{info.goods_list.english_name}}</div>
                    <div class="goods-group">
                        <div>产品类型</div>
                        <div class="goods-supplier">{{info.goods_list.product_category_name}}</div>
                    </div>
                    <div class="goods-group">
                        <div>规格型号</div>
                        <div class="goods-number">{{info.goods_list.specification_type}}</div>
                    </div>

                    <!--                    <div class="goods-group">-->
                    <!--                        <div>供应商报价</div>-->
                    <!--                        <div class="goods-price">¥{{info.money}}</div>-->
                    <!--                    </div>-->
                    <!--                    <div class="goods-group">-->
                    <!--                        <div>还价价格</div>-->
                    <!--                        <div class="goods-price">¥{{info.bargain}}</div>-->
                    <!--                    </div>-->
                    <!--                    <div class="goods-btn-group">-->
                    <!--                        <div class="bargain-btn">还价</div>-->
                    <!--                        <div class="reenquiry-btn">再次询价</div>-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>
        <!-- 订单详情  -->
        <div class='location-detail-seatMeal'>
            <div class='location-detail-seatMeal-head'>订单信息</div>
            <div class="goods-list">
                <div class="goods-list-title">所属供应商</div>
                <div class="goods-list-value">{{info.supplier}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">采购数量</div>
                <div class="goods-list-value">{{info.number}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">采购报价</div>
                <div class="goods-list-value">¥{{info.money}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">供应商交货方式</div>
                <div class="goods-list-value">{{info.expect_mode}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">供应国预期交货日期</div>
                <div class="goods-list-value">{{info.expect_time}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">客户付款方式</div>
                <div class="goods-list-value">{{info.payment_mode}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">客户付款截止日期</div>
                <div class="goods-list-value">{{info.close}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">客户实际交货方式</div>
                <div class="goods-list-value">{{info.actual_mode}}</div>
            </div>
            <div class="goods-list">
                <div class="goods-list-title">客户实际交货日期</div>
                <div class="goods-list-value">{{info.actual_time}}</div>
            </div>

            <!--            <div class="yoshop-notcont">-->
            <!--                <div class="cont">亲，暂无产品详情哦</div>-->
            <!--            </div>-->
        </div>

    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";
    import Head from '@/components/Head.vue';

    @Component({
        components: {
            Head
        },
    })

    export default class Detailpurchase extends Sence {
        public order: any = ''; // 订单id
        public info: any = []; // 订单详情数据

        /**
         * 初始化
         */
        public mounted(): void {
            this.order = this.$route.query.id;
            this.enquiry();
        }

        /**
         * 获取产品询价订单列表
         */
        public enquiry(): void {
            this.post('index.php/api/Purchase/info', {
                order: this.order
            }).then((res: any) => {
                this.info = res.data
            })
        }

    }


</script>

<style scoped lang="stylus">
    .detailpurchase
        padding-bottom 3vw
        background #f2f2f2

    .order-list
        display flex
        flex-direction column
        padding 3vw
        background white
        box-shadow 0 0 10px #ccc

    .order-head
        display flex
        flex-direction row
        justify-content space-between
        align-content center
        border-bottom 1px solid #f2f2f2
        padding-bottom 3vw


    .order-status
        color #339933

    .order-content
        margin-top 3vw
        justify-content space-between
        display flex
        flex-direction row

    .order-goods-img
        width 88px
        height 66px

    .order-right
        width calc(94vw - 6vw - 88px - 10px)
        display flex
        flex-direction column

    .goods-name
        font-size 16px
        font-weight bold

    .goods-group
        display flex
        flex-direction row
        justify-content space-between
        margin-top 10px

    .goods-supplier
        color #808080

    .goods-number
        color #808080

    .goods-price
        color #fa4254

    .goods-btn-group
        margin-top 10px
        display flex
        flex-direction row
        justify-content flex-end

        div
            padding 7px 15px
            font-size 12px
            text-align center
            color white
            border-radius 5px

    .bargain-btn
        background #fa4254
        margin-right 3vw

    .reenquiry-btn
        background orange

    .goods-list
        margin-top 10px
        display flex
        flex-direction row
        justify-content space-between

    .goods-list-title
        color #515151
        font-weight bold

    .goods-list-value
        color #808080

    .location-detail-seatMeal {
        display: flex;
        flex-direction: column;
        background: white;
        margin 3vw 3vw 0 3vw;
        border-radius: 8px;
        padding: 15px;
    }

    .location-detail-seatMeal-head {
        font-size: 16px;
        font-weight: bold;
        color: #4876ff;
    }

    .english-title
        color #808080
        margin-top 5px
        font-size 12px

    .red
        color red


</style>
